<template>
<div>
  <table>
    <tr>
        <td style="padding: 5px;">
          又拍云上传:
        </td>
        <td style="padding: 5px;">
          <input type="file" @change="upload_upyun" />
        </td>
      </tr>
      <tr>
        <td>
          <Button color="red" @click="deletes">删除</Button>
          &emsp;&emsp;
          <input type="text" v-model="upmkdir" /><Button color="blue" @click="upyun">创建目录</Button>
        </td>

      </tr>
  </table>
</div>
</template>

<script>
    export default {
        name: "ypupload",
      data:function () {
        return{
          upmkdir:'',
          filename:'',
        }
      },

      methods:{
          //删除
        deletes:function(){
          this.axios({
            url:'http://127.0.0.1:8000/upy/',
            method:'delete',
            params: {filename:localStorage.getItem('filename')}
          }).then((res)=>{
            console.log(res)
          })
        },

        //创建又拍云目录
        upyun:function(){
          this.axios({
            url:'http://127.0.0.1:8000/upy/',
            method:'get',
            params:{upmkdir: this.upmkdir}
          }).then((res)=>{
            console.log(res)
          })
        },

        // 监听用户鼠标
        onDrag(e){
          e.stopPropagation()
          e.preventDefault()
        },
        onDrag(e){
          e.stopPropagation()
          e.preventDefault()
          this.upload_upyun(e.dataTransfer.files)
        },
        // 拖拽上传又拍云
        upload_upyun:function(files){
          // 获取拖拽文件对象
          let file = files[0]

          // 声明参数
          let param = new FormData()
          param.append('file',file)
          const config = {
              headers:{'Content-Type': 'multipart/form-data'}
          }
          this.axios.post('http://127.0.0.1:8000/ypyun/', param, config) // 上传图片
          .then(function(response){
            console.log(response)
          })
        },
      }
    }
</script>

<style scoped>

</style>
